<template>
  <div class="home">
    <h2>欢迎使用后台管理系统！</h2>
    <el-row type="flex" style="justify-content:center;">
      <el-col>
        <v-chart :options="zhe"></v-chart>
      </el-col>
      <el-col>
        <v-chart :options="pan"></v-chart>
      </el-col>
      <el-col>
        <v-chart :options="zhu"></v-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    var piePatternSrc =
      "";

    var piePatternImg = new Image();
    piePatternImg.src = piePatternSrc;
    // var bgPatternImg = new Image();
    // bgPatternImg.src = bgPatternSrc;

    var itemStyle = {
      normal: {
        opacity: 0.7,
        color: {
          image: piePatternImg,
          repeat: "repeat",
        },
        borderWidth: 3,
        borderColor: "#235894",
      },
    };
    return {
      zhu: {
        title: {
          text: "柱图",
        },
        angleAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        radiusAxis: {},
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4, 3, 5, 1],
            coordinateSystem: "polar",
            name: "A",
            stack: "a",
          },
          {
            type: "bar",
            data: [2, 4, 6, 1, 3, 2, 1],
            coordinateSystem: "polar",
            name: "B",
            stack: "a",
          },
          {
            type: "bar",
            data: [1, 2, 3, 4, 1, 2, 5],
            coordinateSystem: "polar",
            name: "C",
            stack: "a",
          },
        ],
        legend: {
          show: true,
          data: ["A", "B", "C"],
        },
      },

      pan: {
        // backgroundColor: {
        //   image: bgPatternImg,
        //   repeat: "repeat",
        // },
        title: {
          text: "饼图纹理",
          textStyle: {
            color: "#235894",
          },
        },
        tooltip: {},
        series: [
          {
            name: "pie",
            type: "pie",
            selectedMode: "single",
            selectedOffset: 30,
            clockwise: true,
            label: {
              fontSize: 18,
              color: "#235894",
            },
            labelLine: {
              lineStyle: {
                color: "#235894",
              },
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            itemStyle: itemStyle,
          },
        ],
      },
      zhe: {
        title: {
          text: "折线图",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "line",
            symbol: "triangle",
            symbolSize: 20,
            lineStyle: {
              color: "green",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "yellow",
              color: "blue",
            },
          },
        ],
      },
    };
  },
};
</script>

<style>
.home {
  width: 100%;
  height: 100%;
}
.home h2 {
  line-height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  padding-left: 10px;
  border-left: 6px solid teal;
}
.echarts {
  width: 300px;
  height: 300px;
  margin: 50px auto 0;
}
</style>
